{% extends '__base__.html' %}
{% load staticfiles %}

{% block content %}

    {#        表格有数据时展示#}
    <div class="app-title">
        {#            页面简介区域#}
        <div>
            <h1><i class="fa fa-th-list"></i> 配置管理</h1>
            {% if application_list %}
                <p> 修改应用配置文件，分发配置文件，管理应用关联 SLB 后端服务器状态</p>
            {% else %}
                <p>No application are available.</p>
            {% endif %}
        </div>
        {#            面包屑区域#}
        <ul class="app-breadcrumb breadcrumb side">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item"><a href="{% url 'config:configfile' %}">配置管理</a></li>
        </ul>
    </div>

    {% if application_list %}
        {#        表格区域#}
        <div class="row" id="loading">
            <div class="col-md-12">
                <div class="tile">
                    {#                    表格数据区域#}
                    <div class="tile-body table-responsive" id="table">
                        <table class="table table-hover table-bordered" id="sampleTable"
                               style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                            <thead>
                            <tr>
                                <th>站点名称</th>
                                <th>发布注意事项</th>
                                <th class="text-center">配置文件</th>
                                <th class="text-center">所属ECS&nbsp;&nbsp;&nbsp;配置状态&nbsp;&nbsp;&nbsp;操作</th>
                                <th class="text-center">所属ECS&nbsp;&nbsp;&nbsp;SLB状态&nbsp;&nbsp;&nbsp;健康状态&nbsp;&nbsp;&nbsp;操作</th>
                                <th>健康检查</th>
                                <th>配置修改人</th>
                                <th>修改日期</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for application in application_list %}
                                <tr>
                                    <td>
                                        <a href="{% url 'system:application_change' application.id %}"
                                           target="_blank">{{ application.fullname }}</a>
                                    </td>
                                    <td>{{ application.deployattention }}</td>
                                    <td align="right">
                                        {% for configfile in application.configfile_set.all %}
                                            <p>
                                                {{ configfile.filename }}&nbsp;
                                                <a class="btn btn-outline-danger"
                                                   href="{% url 'config:config_change' configfile.id %}">修改</a>&nbsp;
                                                <a class="btn btn-outline-primary"
                                                   href="{% url 'config:config_history_manage' configfile.id %}">历史记录</a>&nbsp;
                                            </p>
                                        {% endfor %}
                                    </td>
                                    <td align="right" id="td_ecs_{{ application.id }}">
                                        {% for r in application.release_set.all %}
                                            <p>
                                                {{ r.ECS.name }}&nbsp;&nbsp;&nbsp;&nbsp;
                                                {% if r.status == "Y" %}已发布{% else %}
                                                    <span class="text-danger">待发布</span>&nbsp;&nbsp;&nbsp;&nbsp;
                                                    <button type="button" class="btn btn-outline-success"
                                                            onclick="config_deploy('{{ r.id }}')">发布
                                                    </button>{% endif %}
                                            </p>
                                        {% endfor %}
                                    </td>
                                    <td align="right" id=td_slb_{{ site.id }}>
                                        {% for i in application.slbtoapplication_set.all.0.SLB.slbhealthstatus_set.all %}
                                            <p>
                                                {{ i.ECS }}&nbsp;&nbsp;&nbsp;&nbsp;
                                                {% if i.SLBStatus == "added" %}已添加{% else %}
                                                    <span class="text-danger">已移除</span>{% endif %}&nbsp;&nbsp;&nbsp;&nbsp;
                                                {% if i.health_status == "normal" %}
                                                    正常{% elif i.health_status == "abnormal" %}
                                                    <span class="text-danger">异常</span>{% else %}
                                                    <span class="text-danger">正在检查</span>{% endif %}&nbsp;&nbsp;&nbsp;&nbsp;
                                                {% if i.SLBStatus == "added" %}
                                                    <a href="javascript:void(0);"
                                                       onclick="remove_backend_server('{{ i.SLB_id }}', '{{ i.ECS_id }}')"
                                                       type="button"
                                                       class="btn btn-outline-warning">移除</a>
                                                {% endif %}
                                                {% if i.SLBStatus == "removed" %}
                                                    <a href="javascript:void(0);"
                                                       onclick="add_backend_server('{{ i.SLB_id }}', '{{ i.ECS_id }}')"
                                                       type="button"
                                                       class="btn btn-outline-success">添加</a>
                                                {% endif %}
                                            </p>
                                        {% endfor %}
                                    </td>
                                    <td><a class="btn btn-outline-info" href="javascript:void(0);"
                                           onclick="update_one_ecs_health_info({{ application.slbtoapplication_set.all.0.SLB_id }})">刷新</a>
                                    </td>
                                    <td>
                                        {% for config in application.configfile_set.all %}
                                            <p>{{ config.modified_user }}</p>
                                        {% endfor %}
                                    </td>
                                    <td>
                                        {% for config in application.configfile_set.all %}
                                            <p>{{ config.modified_time|date:"Y-m-d H:i:s" }}</p>
                                        {% endfor %}
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    {% else %}
        <div class="row">
            <div class="col-md-12">
                <div class="tile">
                    <div class="tile-body">请先添加应用</div>
                </div>
            </div>
        </div>
    {% endif %}

{% endblock %}

{% block custom_static %}

    <!-- Data table plugin-->
    <script type="text/javascript" src="{% static 'js/plugins/jquery.dataTables.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/plugins/dataTables.bootstrap.min.js' %}"></script>
    <script type="text/javascript">$('#sampleTable').DataTable();</script>

    <!-- Notice-->
    <script type="text/javascript" src="{% static 'js/plugins/bootstrap-notify.min.js' %}"></script>

    <!-- function-->
    <script>

        // 发布分发配置文件
        function config_deploy(release_id) {
            let postUrl = "/operation/config_deploy/" + release_id + "/";
            // 显示 loading 遮盖层
            jQuery('#loading').showLoading();
            // 发送 post 请求
            $.post(postUrl, function (data) {
                if (data.success) {
                    // 刷新页面
                    location.reload();
                    // 提示成功信息
                    $.notify({
                        title: "发布成功 : ",
                        message: "生成及分发应用配置文件成功！",
                        icon: 'fa fa-check'
                    }, {
                        type: "success"
                    });
                }
                else {
                    // 提示失败信息
                    $.notify({
                        title: "发布失败 : ",
                        message: data.msg,
                        icon: 'fa fa-check'
                    }, {
                        type: "danger"
                    });
                }
                setTimeout(function () {
                    // 延迟300毫秒关闭loading遮盖层
                    jQuery('#loading').hideLoading();
                }, 300);
            });
        }

        // 移除 slb 后端服务器
        function remove_backend_server(slb_id, server_id) {
            let postUrl = "/system/slb_remove_backend_server/" + slb_id + "/" + server_id + "/";
            // 显示 loading 遮盖层
            jQuery("#loading").showLoading();
            // 发送 post 请求
            $.post(postUrl, function (data) {
                if (data.success) {
                    // 刷新页面
                    location.reload();
                    // 提示成功信息
                    $.notify({
                        title: "移除成功 : ",
                        message: "从阿里云移除 SLB 后端服务器成功！",
                        icon: 'fa fa-check'
                    }, {
                        type: "warning"
                    });
                } else {
                    // 提示失败信息
                    $.notify({
                        title: "移除失败 : ",
                        message: "从阿里云移除 SLB 后端服务器失败！",
                        icon: 'fa fa-check'
                    }, {
                        type: "danger"
                    });
                }
                setTimeout(function () {
                    // 延迟300毫秒关闭loading遮盖层
                    jQuery("#loading").hideLoading();
                }, 100);
            });
        }

        // 添加 slb 后端服务器
        function add_backend_server(slb_id, server_id) {
            let postUrl = "/system/slb_add_backend_server/" + slb_id + "/" + server_id + "/";
            // 显示 loading 遮盖层
            jQuery("#loading").showLoading();
            // 发送 post 请求
            $.post(postUrl, function (data) {
                if (data.success) {
                    // 刷新页面
                    location.reload();
                    // 提示成功信息
                    $.notify({
                        title: "添加成功 : ",
                        message: "从阿里云添加 SLB 后端服务器成功！",
                        icon: 'fa fa-check'
                    }, {
                        type: "success"
                    });
                } else {
                    // 提示失败信息
                    $.notify({
                        title: "添加失败 : ",
                        message: "从阿里云添加 SLB 后端服务器失败！",
                        icon: 'fa fa-check'
                    }, {
                        type: "danger"
                    });
                }
                setTimeout(function () {
                    // 延迟300毫秒关闭loading遮盖层
                    jQuery("#loading").hideLoading();
                }, 100);
            });
        }

        // 刷新单个SLB健康信息
        function update_one_ecs_health_info(slb_id, server_id) {
            let postUrl = "/system/one_slb_health_update/" + slb_id + "/";
            // 显示 loading 遮盖层
            jQuery("#loading").showLoading();
            // 发送 post 请求
            $.post(postUrl, function (data) {
                if (data.success) {
                    // 刷新页面
                    location.reload();
                    // 提示成功信息
                    $.notify({
                        title: "刷新成功 : ",
                        message: "从阿里云刷新 SLB 基础信息成功！",
                        icon: 'fa fa-check'
                    }, {
                        type: "info"
                    });
                } else {
                    // 提示失败信息
                    $.notify({
                        title: "刷新失败 : ",
                        message: "从阿里云刷新 SLB 基础信息失败！",
                        icon: 'fa fa-check'
                    }, {
                        type: "danger"
                    });
                }
                setTimeout(function () {
                    // 延迟300毫秒关闭loading遮盖层
                    jQuery("#loading").hideLoading();
                }, 300);
            });
        }

    </script>

{% endblock %}